<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="1" finish-status="success" process-status="wait" align-center	>
      <el-step title="编辑课程基本信息"></el-step>
      <el-step title="编辑课程大纲"></el-step>
      <el-step title="发布课程"></el-step>
    </el-steps>

    <el-form label-width="80px" class="form" >

      <el-form-item label="课程标题">
        <el-input v-model="CourseList.title" clearable></el-input>
      </el-form-item>

      <el-form-item label="课程讲师">
          <el-select v-model="CourseList.teacherId" placeholder="课程讲师">
            <el-option v-for="(item,index) in teacherList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
       </el-form-item>
       <el-form-item label="课程分类">
          <el-select v-model="CourseList.subjectParentId" placeholder="一级分类" @change="onchange">
            <el-option v-for="(item,index) in subjectOneList" :key="index" :label="item.label" :value="item.id" ></el-option>
          </el-select>
          <el-select v-model="CourseList.subjectId" placeholder="二级分类">
            <el-option v-for="(item,index) in subjectTwoList" :key="index" :label="item.label" :value="item.id" ></el-option>
          </el-select>
       </el-form-item>
     <el-form-item label="价格">
         <el-input-number :min="0" size="medium" v-model="CourseList.price"></el-input-number>
     </el-form-item>
    <el-form-item label="总课时">
         <el-input-number :min="0" size="medium" v-model="CourseList.lessonNum"></el-input-number>
     </el-form-item>
     <el-form-item label="头像" width="300px" height="200px">
         <el-upload
           :action="urlImg()"
           :on-success="successfulSinger"
           :before-upload="beforeUploadSinger"
           >
          <img :src="CourseList.cover" width="300px" height="200px"/>
         </el-upload>
     </el-form-item>
      <el-form-item label="课程简介">
        <Tinymce v-model="CourseList.description" :height="300"></Tinymce>

      </el-form-item>

      <el-form-item >
          <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
      </el-form-item>



    </el-form>



  </div>
</template>

<script>
  import {modifyCourseId,getCourseId,addCourse} from '@/api/course/course.js'
  import {getAllSubject} from '@/api/subject/subject.js'
  import {getAllTeacher} from '@/api/teacher/teacher.js'
  import Tinymce from '@/components/Tinymce'
  export default {
    data(){
      return {
        CourseList:{
          cover:"/static/timg.jpg",
          subjectId:"",
          price:0,
          lessonNum:0
        },
        teacherList:[],
        subjectOneList:[],
        subjectTwoList:[],
        isNaN:true,
      }
    },
   created() {



      this.getAll();

   },
    methods:{
      //添加和修改
      next(){
        if(this.isNaN){
          addCourse(this.CourseList).then(res=>{
             this.$notify({
                title: '成功',
                message: '这是一条成功的提示消息',
                type: 'success'
             });
             this.$router.push(`/course/chapter/${res.data.id}`)
          })
        }else{
            console.log(this.CourseList)
            modifyCourseId(this.CourseList).then(res=>{
              this.$notify({
                 title: '修改成功',
                 message: '这是一条成功的提示消息',
                 type: 'success'
              });
              this.$router.push(`/course/chapter/${res.data.id}`)
            })
        }


      },
       //获取课程讲师和课程分类
      getAll(){
        getAllTeacher().then(res=>{
          this.teacherList=res.data.teacherList
        })
        getAllSubject().then(res=>{

           this.subjectOneList=res.data.data1
           this.getCourseIds()
        })

      },

      onchange(value) {
         this.CourseList.subjectId=""
         this.twosubjectergodic(value)
      },
      //遍历twosubject
      twosubjectergodic(value){
        
        for(let item of this.subjectOneList){
          if(item.id==value){

               this.subjectTwoList=item.children

          }
        }
      },
      getCourseIds(){

          if(this.$route.params.id!=undefined){

            getCourseId(this.$route.params.id).then(res=>{
              this.CourseList=res.data.course
              this.twosubjectergodic(this.CourseList.subjectParentId)
            })
            this.isNaN=false
          }else{
            this.isNaN=true
          }
      },
      urlImg(){
          return process.env.BASE_API+"/eduoss/up"
      },
      /* 上传图片之前判断  */
      beforeUploadSinger(file){

      	const isJpg = (file.type === 'image/jpeg')||(file.type === 'image/png');
      	if(!isJpg){
      		this.$message.error('上传图片只能是jpg和png')
      		return false;
      	}
      	const islt2M = (file.size/1024/1024)<2
      	if(!islt2M){
      		this.$message.error('上传图片不能超过2M')
      		return false;
      	}
      	return true;
      },
      /* 图片上传成功 */
      successfulSinger(response, file, fileList){
        this.$notify({
               title: '成功',
               message: '图片上传成功',
               type: 'success'
          });
          this.CourseList.cover = response.data.url

      },

    },
    components:{
      Tinymce
    }

  }
</script>

<style scoped>
.form{
  width:80vw;
  margin:1.875rem auto;
}
</style>
